<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        color: green;
      }

      .one {
        background-color: red;
      }

      .two {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <!-- 1. 定义模板 -->
    <div id="app">
      <div class="box">嘿嘿嘿</div>
      <div :class="classObj">嘿嘿嘿</div>
      <div :class="classArr">嘿嘿嘿</div>
      <hr />
      <div style="color: red; font-size: 20px">呵呵呵</div>
      <div :style="styleObj">呵呵呵</div>
      <div :style="styleArr">呵呵呵</div>
    </div>
    <!-- 2. 引入vue.js -->
    <script src="./vue.js"></script>

    <!-- 3. 创建vue实例 -->
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          // 如果类名传入的是对象.则键就是类型.是否要加这个类型通过布尔值决定.true就是加,false就是不加
          classObj: { box: true, one: false },
          classArr: ['box', 'two'],

          styleObj: {
            // 注意: vue中写行内样式,值都是字符串,不能简写
            color: 'red',
            fontSize: '30px',
          },
          styleArr: [
            { backgroundColor: 'pink', color: 'skyblue' },
            { border: '1px solid black' },
          ],
        },
      })
    </script>
  </body>
</html>
